var page =1;
function s(){
    var xmlhttp;
    if (window.XMLHttpRequest){
        //  IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
        xmlhttp=new XMLHttpRequest();
    }else{
        // IE6, IE5 浏览器执行代码
        xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
    }
    xmlhttp.onreadystatechange=function(){
        if (xmlhttp.readyState==4 && xmlhttp.status==200){
            var kk =JSON.parse(xmlhttp.responseText);
            console.log(kk);
            console.log(kk.employees);
            for(let i = 0;i<kk.employees.length; i++){
                console.log(kk.employees[i]);
                //创建HTML结构
                var img = document.createElement('img');
                img.src = kk.employees[i].pic;
                var content_right = document.createElement('div');
                content_right.className = "content-right";
                var introduce = document.createElement('p');
                introduce.className = "introduce";
                var Rush = document.createElement('p');
                Rush.className = "Rush";
                var Progress = document.createElement('div');
                Progress.className = "Progress";
                var Progress_div = document.createElement('div');
                Progress_div.style.width = kk.employees[i].Changd
                Progress_div.className ="Progress_div";
                Progress.appendChild(Progress_div);
                content_right.appendChild(introduce);
                content_right.appendChild(Rush);
                introduce.innerHTML = kk.employees[i].introduce;
                Rush.innerHTML = kk.employees[i].rush;
                var jindu = document.createElement('div');
                var Number = document.createElement('p');
                var NumberText1 = document.createElement('span');
                var NumberText2 = document.createElement('span');
                var NumberText3 = document.createElement('span');
                var Percentage = document.createElement('p');
                var PercentageText = document.createElement('span');
                var PercentageText2 = document.createElement('span');
                jindu.className = "jindu";
                Percentage.className = "Percentage";
                Number.className = "Percentage";
                Percentage.appendChild(PercentageText);
                Percentage.appendChild(PercentageText2);
                jindu.appendChild(Percentage);
                jindu.appendChild(Number);
                Number.appendChild(NumberText1);
                Number.appendChild(NumberText2);
                Number.appendChild(NumberText3);
                PercentageText.innerHTML = kk.employees[i].PercentageText;
                PercentageText2.innerHTML = kk.employees[i].PercentageText2;
                NumberText1.innerHTML = kk.employees[i].NumberText1;
                NumberText2.innerHTML = kk.employees[i].NumberText2;
                NumberText3.innerHTML = kk.employees[i].NumberText3;
                var footer = document.createElement('div');
                footer.className ="footer";
                var hong = document.createElement('span');
                hong.className = "hong";
                var wu = document.createElement('span');
                var Present = document.createElement('span');
                Present.className = "Present";
                var Original = document.createElement('span');
                Original.className ="Original"
                footer.appendChild(hong);
                footer.appendChild(wu);
                hong.innerHTML = "¥";
                wu.innerHTML = "¥";
                hong.appendChild(Present);
                wu.appendChild(Original);
                Present.innerHTML = kk.employees[i].Present;
                Original.innerHTML = kk.employees[i].Original
                var centent = document.createElement('div');
                centent.className = 'content';
                centent.appendChild(img);
                centent.appendChild(content_right);
                content_right.appendChild(Progress);
                content_right.appendChild(jindu);
                content_right.appendChild(footer);
                console.log(centent);
                var wrapper = document.querySelector("#wrapper");
                wrapper.appendChild(centent);
            }
        }
    };
    xmlhttp.open("GET","text"+page+".json",true);
    xmlhttp.send();
}
s();

document.querySelector("#btn").addEventListener('click',function(){
    if (page >= 4){
        page = 1;
    }else {
        page++
    }
    document.querySelector("#wrapper").innerHTML = "";
    s()
})